<template>
  <div class="reportsBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/mamger' }"
        >数据统计</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/reports' }"
        >数据报表</el-breadcrumb-item
      >
    </el-breadcrumb>

    <el-card class="box-card">

      <div id="cardBox"></div>

    </el-card>

  </div>
</template>

<script>
import { getCharts } from "../../api/index"
export default {
  data() {
    return {
      list: {},
      // 文档给出的需要合并的项
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    }
  },
  methods: {
    // 初始化图表数据
    async initGetChartsData() {
      let { data, meta: { msg, status} } = await getCharts()
      // console.log(data);
      if(status != 200) return this.$message.error(msg)
      // this.list = data;
      
      // 合并对象
      let mergeOptions = { ...this.options, ...data }
      // 绘制图表
      this.initCharts(mergeOptions)
    },
    // 使用echarts
    initCharts(options) {
      var myChart = this.$echarts.init(document.getElementById('cardBox'));
      myChart.setOption(options)
    }
  },
  mounted() {
    this.initGetChartsData()
  }
}
</script>

<style scoped>

.el-breadcrumb {
  font-size: 12px;
  background-color: initial;
  margin-bottom: 0;
}

.box-card {
  width: 100%;
  max-height: 800px;
  overflow: auto;
  text-align: left;
}

.reportsBox {
  padding-left: 20px;
}

#cardBox {
  width: 750px;
  height: 400px;
}
</style>